<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="搜索" @input='searchValue' />
				<view class="screen">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/channel/screen.png" mode="heightFix"></image>
					</view>
					<view class="font24">
						筛选
					</view>
				</view>
			</view>
			<!-- 切换标签 -->
			<view class="tabs">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#666666'}"
					:activeStyle="{color:'#1DB481'}" @click="tabsClick" :scrollable="false"></uv-tabs>
			</view>
		</view>
		<abnor v-if="dataList.length<=0"></abnor>
		<view class="box" v-if="dataList > 0">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="whole data">
					<view class="item" v-for="(item,index) in dataList" :key="index">
						<view class="left" style="margin-bottom: 60rpx;">
							<view class="stuta font28">
								{{item.status}}
							</view>
							<view class="u_time">
								<view class="icon">
									<image src="https://wx.caobenjiankang.com/image/channel/timess.png" mode="aspectFit"></image>
								</view>
								<view class="title font22">
									下单时间：{{item.u_time}}
								</view>
							</view>
						</view>
						<view class="left" style="margin-bottom: 18rpx;">
							<view class="oderNum font22">
								单号：{{item.oderNum}}
							</view>
							<view class="d_time font22">
								结账：{{item.d_time}}
							</view>
						</view>
						<view class="left">
							<view class="evaluate">
								<view class="icon">
									<image src="https://wx.caobenjiankang.com/image/channel/contracts.png" mode="aspectFit"></image>
								</view>
								<view class="title font28">
									评价
								</view>
							</view>
						</view>
						<view class="houser">
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/channel/houser.png" mode="aspectFit"></image>
							</view>
							<view class="title font28">
								购买客户：{{item.houser}}
							</view>
						</view>
						<view class="collapse">
							<l-collapse :accordion="true" @click="click">
								<l-collapse-item :title="item.projod" titleImg="" :titleImg="true">
									<view class="contents">
										<view class="left" style="margin-right: 8rpx;">
											<view class="price font22">
												￥{{item.price}}
											</view>
											<view class="k_status font22">
												{{item.k_status}}
											</view>
										</view>
										<view class="left">
											<view class="kaid font22">
												开单人：{{item.kai}}
											</view>
											<view class="k_time font22">
												{{item.k_time}}
											</view>
										</view>
									</view>
								</l-collapse-item>
							</l-collapse>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
					name: '全部'
				}, {
					name: '已付款'
				}, {
					name: '未付款'
				}, {
					name: '已好评'
				}], //切换标签
				current: 0, //标签索引
				dataList: [], //数据
				scrollTop: 0, //初始化滚动高度
			}
		},
		components: {

		},
		onLoad() {

		},
		methods: {
			async getData() {

			},
			click(e) {
				console.log(e);
			},
			searchValue(e) {
				console.log(e.detail.value, '3');
			},
			tabsClick(e) {
				this.current = e.index
			},
			scrolltolower() {
				if (this.current == 0) {

				}
				if (this.current == 1) {

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}

			.tabs {}
		}

		.box {
			padding: 16rpx 29rpx;

			.scroll-Y {
				height: calc(100vh - 202rpx - var(--status-bar-height));

				.data {
					.item {
						margin-bottom: 16rpx;
						padding: 17rpx 44rpx 29rpx 43rpx;
						background-color: #fff;

						.left {
							justify-content: space-between;

							.stuta {
								color: #999999;
							}

							.u_time {
								display: flex;
								align-items: center;

								.icon {
									width: 25rpx;
									height: 25rpx;
									display: flex;
									align-items: center;
									margin-right: 4rpx;

									image {
										width: 25rpx;
										height: 25rpx;
									}
								}

								.title {
									color: #999999;
								}
							}

							.oderNum {}

							.d_time {}

							.evaluate {
								display: flex;
								align-items: center;

								.icon {
									width: 27rpx;
									height: 27rpx;
									display: flex;
									align-items: center;
									margin-right: 4rpx;

									image {
										width: 27rpx;
										height: 27rpx;
									}
								}

								.title {
									color: #1DB481;
								}
							}

							.e_time {}
						}

						.houser {
							display: flex;
							align-items: center;
							padding: 24rpx 0 26rpx 29rpx;

							.icon {
								width: 30rpx;
								height: 29rpx;
								display: flex;
								align-items: center;
								margin-right: 4rpx;

								image {
									width: 30rpx;
									height: 29rpx;
								}
							}

							.title {}
						}

						.collapse {
							position: relative;

							.contents {
								display: flex;
								align-items: center;

								.left {
									.price {
										color: #F85131;
									}

									.k_status {
										color: #02A23E;
									}

									.kaid {
										color: #999999;
									}

									.k_time {
										color: #999999;
									}

								}
							}

							/deep/.l-collapse {
								.l-collapse-item {
									.l-collapse-item__title {
										.l-collapse-item__title-wrap {
											.l-collapse-item__title-box {
												.l-collapse-item__title-img {
													width: 8rpx;
												}

												.l-collapse-item__title-text {
													font-size: 25rpx;
												}
											}
										}

										.l-collapse-item__title-arrow {
											position: absolute;

											.icon-xiala {
												font-size: 40rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>